<template>
  <view>
    <view class="" style="padding-top: 325rpx;">
      <drop-down :filterData="filterData" :autoStow="false" @confirm="confirm" @reset="reset" id="dropdown"
                 childName="children" fileds="label" ref="dropDown">
        <template #header>
          <u-navbar title="搜索" @rightClick="rightClick" :autoBack="true" :fixed="false"
                    :safeAreaInsetTop="true">
            <view class="u-nav-slot" slot="left">
              <u-icon name="arrow-left" size="38rpx" color="#000" bold></u-icon>
              <!-- <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line> -->
              <!-- <u-icon name="home" size="20"></u-icon> -->
            </view>
            <view class="" slot="center">
              <view class="flex align-center">
                <view class="" style="font-weight: 500;">
                  <text>{{ coupon.couponLabel || '' }}</text>
                </view>
              </view>
            </view>
          </u-navbar>
          <view class="flex  align-center top-search">
            <view style="margin-left: 16rpx;" @click="showCalendar=true">
              <view class="item-time">
                <text>入</text>
                {{ this.queryParams.startTime|date('mm-dd') }}
              </view>
              <view class="item-time">
                <text>离</text>
                {{ this.queryParams.endTime|date('mm-dd') }}
              </view>
            </view>
            <view class="subday">{{ subDay }}晚</view>
            <view class="vertical"></view>
            <input class="search-input" v-model="queryParams.keyword" @confirm="handleQuery" type="text"
                   placeholder="请输入商圈/景点/公寓"/>
          </view>
        </template>
      </drop-down>
    </view>

    <view style="padding-top: 30rpx;">
      <template v-if="homeList.length>0">
        <view style="padding: 0 30rpx;margin-top: 20rpx;" v-for="(item,index) in homeList" :key="index">
          <view class="item-box flex align-center" @click="toDetail(item)">
            <view>
              <image class="main-img" :src="item.apartmentPictureList[0]" mode="aspectFill">
              </image>
            </view>
            <view class="content flex flex-column justify-between">
              <view>
                <view class="describe">{{ item.apartmentDescription }}</view>
                <view class="flex flex-wrap" style="margin-top: 8rpx;">
                  <view :class="index===0?'h-tag-active':'h-tag'"
                        v-for="(i,index) in item.labelNames.split(',').slice(0,4)" :key="index">{{ i }}
                  </view>
                </view>
                <view class="title flex align-center" style="margin-top: 10rpx;margin-bottom: 6rpx;">
                  <dict-tag :options="dict.type.allocation_type" :value="item.allocationType"/>
                  {{ item.house.houseArea }}㎡
                </view>
                <view class="gray-title">
                  {{ item.house.roomType }}室{{ item.bedNumber }}床.可住{{ item.checkInNumber }}人
                </view>
                <view class="coupon">
                  <view class="coupon-item" v-for="(i,index) in item.couponList.slice(0,3)" :key="index">
                    {{ i.couponLabel }}
                  </view>
                </view>
              </view>
              <view class="price flex align-end">￥
                <text class="num">{{ item.todayPrice }}</text>
                /晚
              </view>
            </view>
          </view>
        </view>
      </template>

      <u-empty mode="list" v-else>
      </u-empty>
    </view>
    <!-- 日历组件 -->
    <uvCalendar :show="showCalendar" :mode="calendarMode" @close="closeCalendar" @confirm="confirmCalendar"
                color="#FF7947" startText="入住时间" endText="离开时间" monthNum="12" :default-date="defaultDate"
                ref="calendar">
    </uvCalendar>
  </view>
</template>
<script>
import data from '@/pages/main/filterData'
import {
  DateDiff,
  dateToFormat,
  DateAdd
} from '@/utils/time.js'
import {
  search
} from '@/api/home';
import {
  areaComboList,
  businessCircle,
  attractions
} from '@/api/common';
import uvCalendar from '@/components/uv-calendar/uv-calendar.vue'
import {getCouponActivityList} from "@/api/mine/coupon";

export default {
  dicts: ['allocation_type'],
  components: {
    uvCalendar
  },
  data() {
    return {
      coupon: {},
      showCalendar: false,
      defaultDate: [],
      filterData: [],
      homeList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        couponId: '',
        'house.cityId': '',
        keyword: '',
        startTime: '',
        endTime: '',
        checkInNumber: null, //人数
        bedNumber: null, //床数
        sortType: ''
      },
    }
  },
  computed: {
    subDay: {
      get() {
        return DateDiff(this.queryParams.startTime, this.queryParams.endTime)
      },
      set() {

      }

    },
    location: {
      get() {
        return this.$store.state.user.location
      },
      set() {
      }

    }
  },
  watch: {
    location(n) {
      this.initData()
    },
  },
  onLoad(options) {
    if (options.coupon) {
      this.coupon = JSON.parse(options.coupon)
      this.queryParams.couponId = this.coupon.couponId
      this.queryParams.startTime = dateToFormat();
      this.queryParams.endTime = DateAdd('day', this.queryParams.startTime, 1);
      this.queryParams['house.cityId'] = this.location ? this.location.id : '';
      this.initFilterData();
      this.getList();
    }
  },
  onReachBottom() {
    if (this.homeList.length < this.total) {
      this.queryParams.pageNum++;
      this.getList()
    }
  },
  methods: {
    initData() {
      console.log('location', this.location)
      this.queryParams = {
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        'house.cityId': this.location.id,
        'house.districtId': '',
        keyword: '',
        priceType: '',
        sortType: '',
        roomType: '',
        bedNumber: '',
        checkInNumber: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.homeList = [];
      this.total = 0
      this.initFilterData();
    },
    async initFilterData() {
      //uni.showLoading()
      console.log('初始化筛选');
      let params = {
        cityId: this.location.id,
      }


      //行政区
      let area = await areaComboList(params.cityId);
      area.data.map(item => {
        item.label = item.name
      })
      data[0].children[0].children = area.data
      // 地铁
      //let subway = await subwayData(params);
      //data[0].children[1].children = subway.data

      //商圈
      let business = await businessCircle(params.cityId)
      business.rows.map(item => {
        item.label = item.businessCircleName
      })

      data[0].children[1].children = business.rows

      //景点
      let scenery = await attractions(params.cityId)
      scenery.rows.map(item => {
        item.label = item.attractionsName
      })
      data[0].children[2].children = scenery.rows
      this.filterData = data;
      this.$refs.dropDown.resetFilter()
    },
    clearList() {
      this.queryParams.pageNum = 1;
      this.homeList = [];
    },
    confirmCalendar(e) {
      this.queryParams.startTime = e[0];
      this.queryParams.endTime = e[e.length - 1];
      this.showCalendar = false;
      this.clearList();
      this.getList();
    },
    closeCalendar() {
      this.showCalendar = false
      uni.showTabBar()
    },
    //获取列表
    getList(queryParams) {
      let params = queryParams ? queryParams : this.queryParams
      for (const key in params) {
        if (!params[key]) {
          delete params[key]
        }
      }
      console.log('params', params)
      getCouponActivityList(params).then(res => {
        let list = res.rows;
        this.total = res.total;
        if (this.queryParams.pageNum === 1) {
          this.homeList = list
        } else {
          this.homeList = this.homeList.concat(list)
        }
      })
    },
    toDetail(row) {
      let data = this.queryParams;
      data.houseId = row.houseId;
      console.log('data',data)
      uni.navigateTo({
        url: `/pages/main/room/roomDetail?data=${encodeURIComponent(JSON.stringify(data))}`
      })
    },
    handleQuery(e) {
      console.log(e.detail.value);
      this.queryParams.keyword = e.detail.value
      this.queryParams.pageNum = 1;
      this.homeList = []
      this.getList();
    },
    confirm(e) {
      console.log('e', e);
      let form = e;
      let keyword = '';
      form.map(item => {
        if (item.type === 'house.districtId') {
          this.queryParams['house.districtId'] = form[1].id
        } else if (item.type === 'business') {
          keyword = form[1].businessCircleName
        } else if (item.type === 'scenery') {
          keyword = form[1].attractionsName
        } else {
          this.queryParams[item.type] = item.value
        }

      })
      if (form.length < 1) {
        this.queryParams = this.$options.data().queryParams;
        this.queryParams['house.cityId'] = this.location.id
        this.queryParams.startTime = dateToFormat()
        this.queryParams.endTime = DateAdd('day', this.queryParams.startTime, 1);
      }
      this.homeList = [];
      this.queryParams.pageNum = 1;
      let params = JSON.parse(JSON.stringify(this.queryParams))
      params.keyword = keyword
      this.getList(params);

    },
    reset() {

    }
  }
}
</script>
<style lang="scss" scoped>
page {
  background-color: #FFFFFF;
}

.top-search {
  width: 690rpx;
  height: 80rpx;
  background: #F5F6FA;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin-left: 30rpx;

  .vertical {
    width: 0;
    height: 44rpx;
    border: 2rpx solid #E5E5E5;
    margin-left: 18rpx;
  }

  .subday {

    font-weight: 500;
    font-size: 20rpx;
    color: #FF3E27;

    margin-left: 10rpx;
  }

  .search-input {

    font-weight: 500;
    font-size: 28rpx;

    margin-left: 8rpx;
  }

  .search-input::placeholder {

    font-weight: 500;
    font-size: 28rpx;
    color: #979797;

  }

  .item-time {
    font-family: DIN, DIN;
    font-weight: bold;
    font-size: 20rpx;
    color: #000000;

    text {

      font-weight: 500;
      font-size: 18rpx;
      color: #757575;
      margin-right: 4rpx;
    }
  }

}

.filtrate-box {
  background-color: #fff;
  padding: 20rpx 30rpx;
}

.item-box {
  background-color: #fff;
  padding-bottom: 30rpx;

  .h-tag {
    min-width: 98rpx;
    height: 40rpx;
    line-height: 40rpx;
    background: #F4F4F4;
    border-radius: 6rpx 6rpx 6rpx 6rpx;

    font-weight: 400;
    font-size: 20rpx;
    color: #757575;
    text-align: center;
    margin-right: 6rpx;
  }

  .h-tag-active {
    min-width: 98rpx;
    height: 40rpx;
    line-height: 40rpx;
    background: #FCEEE0;
    border-radius: 6rpx 6rpx 6rpx 6rpx;

    font-weight: 400;
    font-size: 20rpx;
    color: #A66237;
    text-align: center;
    margin-right: 6rpx;
  }

  .main-img {
    width: 226rpx;
    height: 302rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .content {
    height: 302rpx;
    width: 490rpx;
    margin-left: 16rpx;
  }

  .title {
    font-weight: 500;
    font-size: 24rpx;
    color: #111111;
  }

  .price {
    font-weight: bold;
    font-size: 20rpx;
    color: #FF3E27;

    .num {
      font-family: DIN, DIN;
      font-weight: bold;
      font-size: 40rpx;
      color: #FF3E27;
      line-height: 30rpx;
    }
  }

  .gray-title {
    font-weight: 400;
    font-size: 24rpx;
    color: #757575;
  }
  .coupon {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100rpx, 1fr));
    grid-gap: 10rpx;
    padding: 10rpx 0;

    .coupon-item {
      border: 1rpx solid #D9001B;
      border-radius: 10rpx;
      color: #D9001B;
      font-size: 20rpx;
      text-align: center;
      padding: 6rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .describe {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    word-break: break-all;

    font-weight: 800;
    font-size: 32rpx;
    color: #111111;

  }

}
</style>
